<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<!-- Адаптив -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- Шрифты -->
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap"
		rel="stylesheet" />
	<link rel="stylesheet" href="css/style.css" />
	<!-- Плавный скролл -->
	<script src="https://code.jquery.com/jquery-3.7.1.min.js"
		integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
	<title>Denis Osipov, Hollow_DS</title>
</head>

<body>
	<div class="body-wrapper">
		<section class="greeting">
			<div id="greeting" class="greeting__container container">
				<div class="my-name">Денис Осипов</div>
				<h1 class="greeting__title">Качественная разработка сайтов</h1>
				<div class="greeting__subtitle">Верстка · Адаптация · Доработка</div>
			</div>
			<a href="#header" class="greeting__btn-to-header scrollto" title="Scroll down"></a>
		</section>
		<header id="header" class="header">
			<div class="header__container container">
				<div id="popup" class="popup">
					<div class="popup__body">
						<div class="popup__content">
							<ul class="popup__list">
								<li class="popup__item">
									<a href="#author" class="popup__link scrollto">Автор</a>
								</li>
								<li class="popup__item">
									<a href="#portfolio" class="popup__link scrollto">Портфолио</a>
								</li>
								<li class="popup__item">
									<a href="#contact" class="popup__link scrollto">Контакты</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="header__logo logo">Hollow DS</div>
				<nav class="header__navigation navigation">
					<ul class="navigation__list">
						<li class="navigation__item">
							<a href="#author" class="navigation__link scrollto">Автор</a>
						</li>
						<li class="navigation__item">
							<a href="#portfolio" class="navigation__link scrollto">Портфолио</a>
						</li>
						<li class="navigation__item">
							<a href="#contact" class="navigation__link scrollto">Контакты</a>
						</li>
					</ul>
				</nav>
				<a href="#header" id="popup" class="header__burger popup-link "><span></span></a>
				<a href="#header" id="popup" class="close-popup "></a>
			</div>
		</header>
		<main class="main">
			<div class="main__wrapper wrapper">
				<section id="author" class="main__author author">
					<div class="author__container container">
						<div class="author__head">
							<h2 class="author__title main-title">Автор</h2>
							<div class="author__text">
								Меня зовут Денис, я занимаюсь разработкой сайтов любой
								сложности. Занимаюсь версткой, доработкой и адаптацией. Свои
								работы выполняю с учетом современных требований и с
								использованием лучших технологий. Именно поэтому
								<strong>каждый проект:</strong>
							</div>
						</div>
						<div class="author__advantages advantages">
							<div class="advantages__list">
								<div class="advantages__item">
									<div class="advantages__icon">
										<img src="pictures/icons/author/preproc.svg" alt="preproc" />
									</div>
									<div class="advantages__description">
										<strong>Использует</strong> в написани лучшие плагины и
										препроцессоры: Emmet, Sass
									</div>
								</div>
								<div class="advantages__item">
									<div class="advantages__icon">
										<img src="pictures/icons/author/bem.svg" alt="BEM" />
									</div>
									<div class="advantages__description">
										<strong>Написан</strong> с использованием методологии BEM
										в именовании классов
									</div>
								</div>
								<div class="advantages__item">
									<div class="advantages__icon">
										<img src="pictures/icons/author/code.svg" alt="code" />
									</div>
									<div class="advantages__description">
										<strong>Без ошибок в коде</strong> (качественный валидный
										код)
									</div>
								</div>
								<div class="advantages__item">
									<div class="advantages__icon">
										<img src="pictures/icons/author/optimization.svg" alt="optimization" />
									</div>
									<div class="advantages__description">
										<strong>Собирается</strong> и оптимизируется в
										автоматическом режиме с помощью Gulp
									</div>
								</div>
								<div class="advantages__item">
									<div class="advantages__icon">
										<img src="pictures/icons/author/time.svg" alt="time" />
									</div>
									<div class="advantages__description">
										<strong>Быстро загружается</strong> в браузерах на любых
										устройствах
									</div>
								</div>
								<div class="advantages__item">
									<div class="advantages__icon">
										<img src="pictures/icons/author/saving.svg" alt="saving" />
									</div>
									<div class="advantages__description">
										<strong>Хранит</strong> историю изменения исходных файлов
										в репозитории git
									</div>
								</div>
							</div>
						</div>
					</div>
				</section>
				<section id="portfolio" class="main__portfolio portfolio">
					<div class="portfolio__container container">
						<h2 class="portfolio__title main-title">Портфолио</h2>
						<div class="portfolio__list">
							<!-- Работы для портфолио -->
							<article class="portfolio__item">
								<a href="https://procodezero.github.io/Borodinski/index.html" class="portfolio__link" target="_blank">
									<div class="portfolio__image-wrapper">
										<img class="portfolio__image" src="pictures/profile-images/borodinski.jpg" alt="Borodinski" />
									</div>
									<h4 class="item__title">Барбершоп</h4>
								</a>
							</article>
							<article class="portfolio__item">
							<a href="https://procodezero.github.io/Psychologist-website/" class="portfolio__link" target="_blank">
								<div class="portfolio__image-wrapper">
									<img class="portfolio__image" src="pictures/profile-images/psychologist.jpg" alt="Borodinski" />
								</div>
								<h4 class="item__title">Сайт психолога</h4>
							</a>
						</article>
						<article class="portfolio__item">
						<a href="https://procodezero.github.io/WebNote/" class="portfolio__link" target="_blank">
							<div class="portfolio__image-wrapper">
								<img class="portfolio__image" src="pictures/profile-images/webNote.png" alt="Borodinski" />
							</div>
							<h4 class="item__title">Заметки</h4>
						</a>
					</article>
						</div>
					</div>
				</section>
				<section id="contact" class="main__contact contact">
					<div class="contact__container container">
						<h2 class="contact__title main-title">Контакты</h2>
						<div class="contact__text">Если у Вас есть вопросы или предложения, или хотите получить больше информации -
							заполните и отправьте форму, и я свяжусь с Вами в ближайшее время</div>
						<form id="fom" action="#" method="post" enctype="multipart/form-data" class="contact__form">
							<div class="form__group">
								<input placeholder="Имя" type="text" class="form__input" name="name" id="formName">
								<label class="form__label" for="formName">Имя</label>
							</div>
							<div class="form__group">
								<input placeholder="E-mail" type="email" class="form__input" name="email" id="formEmail">
								<label class="form__label" for="formEmail">E-mail</label>
							</div>
							<div class="form__group">
								<textarea placeholder="Сообщение" name="message" id="formMessage"
									class="form__input form__textarea"></textarea>
								<label class="form__label" for="formEmail">Сообщение</label>
							</div>
							<div class="form__privacy-policy">Отправляя форму, вы даете согласие на обработку персональных данных и
								соглашаетесь с <a class="privacy-policy-link" href="privacy.html" target="_blank">политикой конфиденциальности</a>.
							</div>
							<button type="submit" class="form__button main-link">Отправить</button>
						</form>
						<div class="contact__alternative-contact alternative-contact">
							<div class="alternative-contact__text">
								Также можете связаться со мной другим удобным для Вас способом:
							</div>
							<ul class="alternative-contact__links-list links-list">
								<!-- Skype -->
								<li class="links-list__item"><a href="https://join.skype.com/invite/zWZge34jSl9F" target="_blank" class="links-list__link link-1"></a></li>
								<!-- Email -->
								<li class="links-list__item"><a href="https://e.mail.ru/cgi-bin/sentmsg?To=denis.osipov.2017@inbox.ru&from=otvet" target="_blank" class="links-list__link link-2"></a></li>
								<!-- Telegram -->
								<li class="links-list__item"><a href="https://t.me/HollowDS" target="_blank" class="links-list__link link-3"></a></li>
								<!-- Whatsapp -->
								<li class="links-list__item"><a href="https://wa.clck.bar/79040875439" target="_blank" class="links-list__link link-4"></a></li>
							</ul>
						</div>
					</div>
				</section>
			</div>
		</main>
		<footer class="footer">
			<div class="footer__container">
				<div class="footer__owner owner">
					<div class="owner__logo logo">Hollow DS</div>
					<div class="owner__name">Денис Осипов</div>
				</div>
				<div class="footer__info info">
					<div class="info__block-1">©hollow-ds.ru, 2023-2023</div>
					<div class="info__block-2"><a class="privacy-policy-link" href="privacy.html" target="_blank">Политика конфиденциальности</a></div>
				</div>
			</div>
		</footer>
	</div>
	<script src="js/script.js"></script>
	</div>
</body>

</html>